<style scoped lang="less">
</style>
<template>
  <div class="open-room">
    <div>
      <Form id="open-room-form" v-model="roomForm" :label-width="70">
        <Row>
          <!-- <Row> -->
          <!-- 答疑室 -->
          <Col span="24">
            <FormItem label="老师名:">
              <i-Input v-model="teacherName" :disabled="true"></i-Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="专业" prop="profession">
              <Select
                v-model="roomForm.professionIds"
                @on-change="professionChange"
                placeholder="请选择专业"
                filterable
                multiple
              >
                <Option
                  v-for="profession in allData.professionList"
                  :value="profession.tid"
                >{{profession.proName}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="24">
            <Row>
              <Col span="18">
                <FormItem label="课程" prop="course">
                  <Select v-model="roomForm.courseIds" multiple placeholder="请选择课程" filterable>
                    <Option
                      v-for="course in courseSelectList"
                      :value="course.tid"
                    >{{course.courseName}}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="6">
                <!-- v-model="roomForm.checkCourse" -->
                <Checkbox @on-change="checkedCourseChange" style="margin: 7px 25px;">限定专业</Checkbox>
              </Col>
            </Row>
          </Col>
          <Col span="24">
            <Row>
              <Col span="18">
                <FormItem label="学生" prop="course">
                  <Select v-model="roomForm.studentIds" multiple placeholder="请选择学生" filterable>
                    <Option
                      v-for="student in studentSelectList"
                      :value="student.tid"
                    >{{student.name}}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="6">
                <!-- v-model="roomForm.checkStudent" -->
                <Checkbox @on-change="checkedStudentChange" style="margin: 7px 25px;">限定专业</Checkbox>
              </Col>
            </Row>
          </Col>
          <Col span="24">
            <FormItem label="描述:">
              <Input
                v-model="roomForm.desc"
                type="textarea"
                :autosize="{minRows: 3, maxRows: 10}"
                placeholder="请输入课程描述"
              ></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/libs/util'
import Vue from 'vue'

export default {
  props: ['roomForm'],
  data () {
    return {
      isLogin: false,
      // roomForm: {},
      courseSelectList: [],
      studentSelectList: [],
      professionSelectIds: [],
      teacherName: '',

      // 原始数据
      allData: {
        professionList: [],
        courseList: [],
        proCourseRalatelist: [],
        studentList: [],
        proStudentRelateList: []
      }
    }
  },
  methods: {
    // 开通答疑室
    handleOpen () {
      this.$httpUtil.asyncPost('web/raroom/open', this.roomForm, res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.msg)
          debugger
          this.$emit('open-room-success')
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },

    // 当专业选定某一个选项时触发
    professionChange (value) {
      if (value) {
        console.log(value)
        this.professionSelectIds = value
      }
    },

    // 课程中的限定专业选中
    checkedCourseChange (v) {
      if (v) {
        let courseIds = new Set()
        if (this.professionSelectIds && this.professionSelectIds.length > 0) {
          // 课程从所选专业中筛选 选出课程id号
          this.allData.proCourseRalatelist.forEach(item => {
            if (this.professionSelectIds.indexOf(item.professionId) > 0) {
              courseIds.add(item.courseId)
            }
          })
        }
        console.log(courseIds)
        // 从课程列表中筛选出符合条件的。
        if (courseIds && courseIds.size > 0) {
          this.courseSelectList = this.allData.courseList.filter(item => {
            return courseIds.has(item.tid)
          })
        }
      } else {
        this.courseSelectList = this.allData.courseList
      }
    },

    // 学生中的限定专业改变
    checkedStudentChange (v) {
      if (v) {
        debugger
        let studentIds = new Set()
        if (this.professionSelectIds && this.professionSelectIds.length > 0) {
          // 课程从所选专业中筛选 选出课程id号
          this.allData.proStudentRelateList.forEach(item => {
            if (this.professionSelectIds.indexOf(item.professionId) > 0) {
              studentIds.add(item.userId)
            }
          })
        }
        console.log(studentIds)
        // 从课程列表中筛选出符合条件的。
        if (studentIds && studentIds.size > 0) {
          this.studentSelectList = this.allData.studentList.filter(item => {
            return studentIds.has(item.tid)
          })
        }
      } else {
        this.studentSelectList = this.allData.studentList
      }
    },

    // 获取下拉框列表
    getAllData () {
      this.$httpUtil.asyncGet('web/raroom/getAllData', {}, res => {
        if (res.data.code === 200) {
          let data = res.data.records
          this.teacherName = data.teacherName
          this.allData.professionList = data.professionList
          this.allData.courseList = data.courseList
          this.allData.proCourseRalatelist = data.proCourseRalatelist
          this.allData.studentList = data.studentList
          this.allData.proStudentRelateList = data.proStudentRelateList

          this.studentSelectList = data.studentList
          this.courseSelectList = data.courseList
        } else {
          this.$Message.success(res.data.msg)
        }
      })
    },

    // 初始化方法
    init () {
      this.getAllData()
    }
  },
  computed: {
    getLogin () {
      let token = getToken()
      if (token) {
        return true
      } else {
        return false
      }
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    getLogin (v) {
      debugger
      this.isLogin.v
    }
  }
}
</script>
